﻿@model System.Collections.Generic.List<HxBlogs.WebApp.Models.BlogViewModel>
@{
    string date = "h" + Hx.Sdk.Common.Helper.Helper.GetTimestamp().ToString(),
       carousel = date + "001";
}
<div class="d-flex pt-2">
    <div class="flex-fill d-flex flex-column flex-sm-row">
        @if (Model.Count > 0)
        {
            <div class="w-100 w-sm-70">
                <div id="@carousel" class="carousel slide h-100" data-ride="carousel" data-interval="3000">
                    <!-- 指示符 -->
                    <ul class="carousel-indicators">
                        @for (int i = 0; i < 4; i++)
                        {
                            <li data-target="#@carousel" data-slide-to="@i" class="@(i==0?"active":"")"></li>
                        }
                    </ul>
                    <!-- 轮播图片 -->
                    <div class="carousel-inner h-100">
                        @for (int i = 0; i < 4; i++)
                        {
                            <div class="carousel-item @(i==0?"active":"")">
                                <img class="carousel-img img-thumbnail" src="@Model[i].ImgUrl">
                                <div class="carousel-caption">
                                    @*<h3>@blog.Title</h3>*@
                                    <p>@Model[i].Title</p>
                                </div>
                            </div>
                        }
                    </div>

                    <!-- 左右切换按钮 -->
                    <a class="carousel-control-prev" href="#@carousel" data-slide="prev">
                        <span class="carousel-control-prev-icon"></span>
                    </a>
                    <a class="carousel-control-next" href="#@carousel" data-slide="next">
                        <span class="carousel-control-next-icon"></span>
                    </a>
                </div>
            </div>
            <div class="ml-sm-2 mt-2 mt-sm-0 w-100 w-sm-30">
                <div class="d-flex flex-row flex-sm-column carousel-thumbnail">
                    <a class="mb-2 w-50 w-sm-100">
                        <img src="@(Model[1].ImgUrl)" class="img-thumbnail">
                    </a>
                    <a class="w-50 w-sm-100 ml-1 ml-sm-0">
                        <img src="@(Model[Model.Count - 2].ImgUrl)" class=" img-thumbnail">
                    </a>
                </div>
            </div>
        }
    </div>
</div>
